<template>
	<div class="v-view">
		<Breadcrumb moduleName="事件分析">
			<Shortcuts slot="content" :projectId="projectId" :curPage="'event'" />
		</Breadcrumb>
		<div class="events">
			<div class="screen">
				<div class="analysis">
					<h3>分析模型</h3>
				</div>
				<div class="box-btn">
					<a-button class="btn">保存报表</a-button>
					<a-button type="primary" class="btn" @click="submitAnalysisData">查询</a-button>
				</div>
			</div>
			<div class="data-view">
				<DataView ref="dataView" />
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Breadcrumb from '@/layout/components/Breadcrumb/index.vue'
import Shortcuts from '@/layout/components/Breadcrumb/Shortcuts.vue'
import DataView from './dataView.vue'
@Component({
	components: {
		Breadcrumb,
		Shortcuts,
		DataView
	}
})
export default class Events extends Vue {
	@Prop() private msg!: string

	private data!: any

	mounted(): void {
		console.log('')
	}

	private async submitAnalysisData(): Promise<void> {
		const params = {
			size: 10,
			current: 1
		}
		// url地址 替换为对应接口地址
		const res = await this.$request('url地址', {
			method: 'POST',
			customError: true, // 自定义接口返回错误时提示样式, 不传即默认false
			data: params // data为请求接口时入参参数
		})
		this.data = res.data
	}
	/*
	this.$request('url地址', {
			method: 'POST',
			data: {
				...params
			}
		}).then(({ data }) => {
			console.log({ data })
		})
	*/
}
</script>

<style lang="scss" scoped>
.v-view {
	height: 100%;
}

.events {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: calc(100% - 56px);
	.screen {
		position: relative;
		width: 448px;
		height: 100%;
		box-sizing: content-box;
		background: #fff;
		.analysis {
			height: calc(100% - 60px);
			overflow-y: scroll;
			padding: 10px 10px 10px 15px;
		}
		.box-btn {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100%;
			border-top: 1px solid #e9e9e9;
			padding: 10px 16px;
			background: #fff;
			text-align: right;
			z-index: 1;
			.btn {
				display: inline-block;
				margin-left: 8px;
			}
		}
	}
	.data-view {
		overflow-y: auto;
		flex: 1;
		height: calc(100% - 16px);
		margin: 16px;
		margin-bottom: 0;
		padding: 20px 24px;
		background: #fff;
		@include scrollBar;
	}
}
</style>
